<template>
    <div style="background-color: #226699;height:97vh;display: flex;
		flex-direction: column;
		justify-content: center; color: #FFFFFF;width: 100%;overflow: hidden">
        <div id="title" style="text-align: center;">
            <h2>欢迎使用该系统</h2>
        </div>
        <div id="main">
				<el-form :rules="rules" :model="userBean" ref="userBean" status-icon label-width="100px" class="demo-ruleForm" >
					<el-row>
						<el-col :span="12" :offset="6">
							<el-form-item prop="username">
								<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userBean.username"
									autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12" :offset="6">
							<el-form-item prop="userpwd">
								<el-input prefix-icon="el-icon-s-goods" type="password" v-model="userBean.userpwd"
									autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12" :offset="6">
							<el-form-item>
								<el-button type="primary" @click="login()">提交</el-button>
								<el-button @click="resetForm('userBean')">重置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				
				</el-form>
				
			</div>
    </div>
</template>
<script>
import axios from 'axios';
import Qs from 'qs';
export default{
    name:"Login",
    data(){
    return{
        userBean: {
					username: "",
					userpwd: ""
				},
        rules:{
            username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
            ],
            userpwd:[
                    { required: true, message: '请输入密码', trigger: 'blur' }
            ]
            
        }
    }
},
methods:{
    login:function(){
        var that=this
					console.log("处理前的userBean：：：")
					console.log(this.userBean)
					console.log("处理后的UserBean:::")
					console.log(Qs.stringify(this.userBean))
					// 提交后的业务处理				
					axios.post('http://localhost:8086/login',Qs.stringify(this.userBean))
					  .then(function (response) {
                        console.log(response)
						  // 若响应的结果为ok
					    if(response.data==="ok"){
                            localStorage.setItem("username",that.userBean.username)
							// 使用路由进行页面跳转
							that.$router.push("/")
                           
							// window.location.href="welcome.html"
						}else{
							window.location.href="index.html"
						}
						
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				resetForm(formName) {
					// 重置表单
					this.$refs[formName].resetFields();
				}

}
}


</script>
<style scoped>


</style>